<template>
  <div class="l-tab-page pd-8" style="overflow-y: auto;padding-bottom: 0;">
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>学校球类爱好统计图</span>
          </div>
          <l-echarts :option="basicPie" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>小区出行交通工具统计图</span>
          </div>
          <l-echarts :option="roundPie" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>某市人口数据统计图/万人</span>
          </div>
          <l-echarts :option="nightingale" style="height:350px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区人口统计图</span>
          </div>
          <l-echarts :option="nestedPie" style="height:350px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        grid: {
          top: "10%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        color: [
          "#45C2E0",
          "#C1EBDD",
          "#FFC851",
          "#5A5476",
          "#1869A0",
          "#FF9393",
        ],
        series: [
          {
            name: "学校球类爱好统计图",
            type: "pie",
            radius: "90%",
            data: [
              { value: 1048, name: "篮球" },
              { value: 735, name: "足球" },
              { value: 580, name: "乒乓球" },
              { value: 484, name: "羽毛球" },
              { value: 300, name: "网球" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

  computed: {
    // 学校球类爱好统计图
    basicPie() {
      return this.$deepClone(this.option);
    },
    // 小区出行交通工具统计图
    roundPie() {
      let option = this.$deepClone(this.option);
      option.grid = {
        top: "0%",
        bottom: "10%",
      };
      option.legend = { top: "0%", left: "center" };
      option.color = ["#f093fb", "#f6d365", "#4facfe", "#44e97b", "#a3bded"];
      option.series = [
        {
          name: "小区出行交通工具",
          type: "pie",
          radius: ["50%", "80%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "25",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "步行" },
            { value: 735, name: "地铁" },
            { value: 580, name: "自行车" },
            { value: 484, name: "公交车" },
            { value: 300, name: "私家车" },
          ],
        },
      ];
      return option;
    },
    //城市人口数据统计图
    nightingale() {
      let option = {
        grid: {
          top: "10%",
          bottom: "0%",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: "6%",
        },
        series: [
          {
            name: "某市",
            type: "pie",
            radius: [20, 110],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 160, name: "东一区" },
              { value: 140, name: "东二区" },
              { value: 130, name: "东三区" },
              { value: 100, name: "北一区" },
              { value: 80, name: "南一区" },
              { value: 50, name: "西一区" },
              { value: 47, name: "西二区" },
              { value: 23, name: "西三区" },
            ],
          },
        ],
      };
      return option;
    },
    // 嵌套环形图
    nestedPie() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          data: [
            "青年人",
            "儿童",
            "老年人",
            "江苏人",
            "浙江人",
            "安徽人",
            "江西人",
            "广东人",
          ],
          bottom: "6%",
          left: "right",
          orient: "vertical",
        },
        series: [
          {
            name: "人口统计",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "青年人" },
              { value: 775, name: "儿童" },
              { value: 679, name: "老年人", selected: true },
            ],
          },
          {
            name: "人口统计",
            type: "pie",
            radius: ["50%", "70%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 448, name: "江苏人" },
              { value: 335, name: "浙江人" },
              { value: 310, name: "安徽人" },
              { value: 251, name: "江西人" },
              { value: 234, name: "广东人" },
            ],
          },
        ],
      };
      return option;
    },
  },
};
</script>
